<template>
  <div>
    <!-- 即将到站 2018/3/7 11:44 zuoW -->
    <Row>
      <Form label-position="right" :label-width="90">
        <i-col :span="4">
          <FormItem label="集装箱种类">
            <Select v-model="tabParam.isContainer" filterable placeholder="请选择集装箱种类" style="width: 200px">
              <Option v-for="item in queryForm" :value="item.isContainer" :key="item.isContainer">{{ item.truckTypeName }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Form>
    </Row>
    <Row>
      <i-col span="24">
        <Tabs v-model="tabParam.status">
          <template v-for="item in orderStatues">
            <TabPane :label="item.label" :name="item.val"></TabPane>
          </template>
        </Tabs>

        <!--即将到站-->
        <tablePage ref="inspectionTab" :api="getMainOrderByPage" :param="tabParam" sort-name="orderNo asc,startStationTime" sort-type="desc" :isStartLoad="true" v-if="tabParam.status==orderStatues[0].val">
          <template slot-scope="props">
            <Table :columns="inspectionColumnComingStation" :data="props.data" @on-sort-change="props.sortChange" border></Table>
          </template>
        </tablePage>

        <!--已到站-->
        <tablePage ref="inspectionTab" :api="getMainOrderByPage" :param="tabParam" sort-name="orderNo asc,endStationTime" sort-type="desc" :isStartLoad="true" v-if="tabParam.status==orderStatues[1].val">
          <template slot-scope="props">
            <Table :columns="inspectionColumnArrived" :data="props.data" @on-sort-change="props.sortChange" border></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>
    <xlinkModal v-model="operatModal.sendNoticeShow" title="发送通知" width="400">
      <!---->
      <sendNoticeMainOrder v-if="operatModal.sendNoticeShow" :currentMainOrder="mainOrderCurrentRow" @close="sendNoticeClose"></sendNoticeMainOrder>
    </xlinkModal>
    <xlinkModal v-model="operatModal.viewDetailShow" title="查看详情" width="1000">
      <viewDetail v-if="operatModal.viewDetailShow" :currentMainOrder="mainOrderCurrentRow"></viewDetail>
    </xlinkModal>
    <!--<xlinkModal v-model="operatModal.assignmentOrderShow" title="整列派单" width="768">
      <assignmentOrder v-if="operatModal.assignmentOrderShow" :currentMainOrder="mainOrderCurrentRow" @close="sendAssignmentOrderClose"></assignmentOrder>
    </xlinkModal>-->
  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import { getMainOrderByPage } from '@api/backEnd/mainOrder'
  import xlinkModal from '@components/modal/xlinkModal'
  import sendNoticeMainOrder from './components/sendNoticeMainOrder'
  import { assignmentOrder, getTrackCodeByMainOrderNo } from '@api/backEnd/station'
  import viewDetail from './components/viewDetail'
  import moment from 'moment'

  export default {
    name: 'coming--tation-inspection',
    data () {
      let operatModal = { viewDetailShow: false, sendNoticeShow: false, assignmentOrderShow: false, dispatchDriverShow: false, viewDetailForFleetShow: false }
      let mainOrderCurrentRow = {}
      /* 即将到站 */
      let inspectionColumnComingStation = [
        {
          title: '联运单号',
          key: 'orderNo',
          width: 185,
          fixed: 'left'
        },
        {
          title: '发站名',
          key: 'startStationName',
          width: 100
        },
        {
          title: '发出时间',
          width: 150,
          key: 'startStationTime',
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.startStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '终点站',
          key: 'endStationName',
          width: 100
        },
        {
          title: '预计到站时间',
          width: 150,
          key: 'estimateArriveTime',
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.estimateArriveTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '收发货人',
          ellipsis: 'false',
          key: 'shipper',
          minWidth: 400,
          render: (h, params) => {
            let shipper = params.row.shipper
            shipper = shipper ? shipper + '' : ''
            let receiver = params.row.receiver
            receiver = receiver ? receiver + '' : ''
            let thisdata = shipper + '-' + receiver
            return (<span title={thisdata}>{thisdata}</span>)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 250,
          render: (h, params) => {
            let sendNoticeBtn = (<i-button type="error" size="small" style="margin-right: 5px;" onClick={() => this.sendNoticeAction(params.row)}>预通知车队</i-button>)
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            if (params.row.noticeTime) {
              sendNoticeBtn = (<i-button type="success" size="small" style="margin-right: 5px;">已通知车队</i-button>)
            }
            let btnArray = []
            powerUtil.contains('sendNotice') && btnArray.push(sendNoticeBtn)
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
            return (btnArray)
          }
        }
      ]
      let inspectionColumnArrived = [
        {
          title: '联运单号',
          key: 'orderNo',
          width: 185,
          fixed: 'left'
        },
        {
          title: '所在股道',
          width: 100,
          render: (h, params) => {
            let orderNo = params.row.orderNo
            getTrackCodeByMainOrderNo({ mainOrderNo: orderNo }).then((res) => {
              if (+res.data.isSuccess === 1) {
                params.row.paraPositionTrack = res.data.data.trackcode
                params.row.estimateArriveTime = res.data.data.get_time
              }
            })
            return (<span>{params.row.paraPositionTrack}</span>)
          }
        },
        {
          title: '发站名',
          key: 'startStationName',
          width: 100
        },
        {
          title: '发出时间',
          width: 150,
          key: 'startStationTime',
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.startStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '终点站',
          key: 'endStationName',
          width: 100
        },
        {
          title: '到达时间',
          width: 150,
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.endStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '收发货人',
          ellipsis: 'false',
          minWidth: 400,
          render: (h, params) => {
            let shipper = params.row.shipper
            shipper = shipper ? shipper + '' : ''
            let receiver = params.row.receiver
            receiver = receiver ? receiver + '' : ''
            let thisdata = shipper + '-' + receiver
            return (<span title={thisdata}>{thisdata}</span>)
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 250,
          align: 'center',
          render: (h, params) => {
            let assignmentOrderBtn = (<i-button type="error" size="small" style="margin-right: 5px;" onClick={() => this.assignmentOrderAction(params.row)}>整列派单</i-button>)
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            if (params.row.assignmentTime) {
              assignmentOrderBtn = (<i-button type="success" size="small" style="margin-right: 5px;">已派单</i-button>)
            }
            let btnArray = []
            powerUtil.contains('assignmentOrder') && btnArray.push(assignmentOrderBtn)
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
            return (btnArray)
          }
        }
      ]
      let orderStatues = [
        { label: '即将到站', val: '1,2,3,4' },
        { label: '已到站', val: '5' }
      ]
      if (powerUtil.contains('comingFleet')) {
        inspectionColumnComingStation = [
          {
            title: '联运单号',
            key: 'orderNo',
            width: 200,
            fixed: 'left'
          },
          {
            title: '发站名',
            key: 'startStationName',
            width: 100
          },
          {
            title: '发出时间',
            width: 150,
            key: 'startStationTime',
            sortable: true,
            render: (h, params) => {
              let thisdata = params.row.startStationTime
              thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
              return (<span>{thisdata}</span>)
            }
          },
          {
            title: '终点站',
            key: 'endStationName',
            width: 100
          },
          {
            title: '预计到站时间',
            width: 150,
            key: 'estimateArriveTime',
            sortable: true,
            render: (h, params) => {
              let thisdata = params.row.estimateArriveTime
              thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
              return (<span>{thisdata}</span>)
            }
          },
          {
            title: '收发货人',
            minWidth: 400,
            render: (h, params) => {
              let shipper = params.row.shipper
              shipper = shipper ? shipper + '' : ''
              let receiver = params.row.receiver
              receiver = receiver ? receiver + '' : ''
              let thisdata = shipper + '-' + receiver
              return (<span title={thisdata}>{thisdata}</span>)
            }
          },
          {
            title: '更新时间',
            ellipsis: 'false',
            key: 'lastUpdateTime',
            width: 250,
            render: (h, params) => {
              let thisdata = params.row.lastUpdateTime
              return thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            }
          },
          // 添加查看详情
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 250,
            render: (h, params) => {
              let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
              let btnArray = []
              powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
              return (btnArray)
            }
          }
        ]
        inspectionColumnArrived = [
          {
            title: '联运单号',
            key: 'orderNo',
            width: 185,
            fixed: 'left'
          },
          {
            title: '所在股道',
            width: 100,
            render: (h, params) => {
              let orderNo = params.row.orderNo
              getTrackCodeByMainOrderNo({ mainOrderNo: orderNo }).then((res) => {
                if (+res.data.isSuccess === 1) {
                  params.row.paraPositionTrack = res.data.data.trackcode
                  params.row.estimateArriveTime = res.data.data.get_time
                }
              })
              return (<span>{params.row.paraPositionTrack}</span>)
            }
          },
          {
            title: '发出时间',
            width: 150,
            key: 'startStationTime',
            sortable: true,
            render: (h, params) => {
              let thisdata = params.row.startStationTime
              return thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            }
          },
          {
            title: '到达时间',
            width: 150,
            sortable: true,
            render: (h, params) => {
              let thisdata = params.row.endStationTime
              thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
              return (<span>{thisdata}</span>)
            }
          },
          {
            title: '收发货人',
            ellipsis: 'false',
            minWidth: 400,
            render: (h, params) => {
              let shipper = params.row.shipper
              shipper = shipper ? shipper + '' : ''
              let receiver = params.row.receiver
              receiver = receiver ? receiver + '' : ''
              let thisdata = shipper + '-' + receiver
              return (<span title={thisdata}>{thisdata}</span>)
            }
          },
          {
            title: '更新时间',
            ellipsis: 'false',
            key: 'lastUpdateTime',
            width: 250,
            render: (h, params) => {
              let thisdata = params.row.lastUpdateTime
              return thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            }
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 250,
            render: (h, params) => {
              let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
              let btnArray = []
              powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
              return (btnArray)
            }
          }
        ]
      }
      let queryForm = [
        { 'isContainer': 1, 'truckTypeName': '集装箱' },
        { 'isContainer': 0, 'truckTypeName': '整车运输' }
      ]
      let tabParam = { startStationCode: '', endStationCode: '', status: orderStatues[0].val }
      let datas = { orderStatues, inspectionColumnComingStation, inspectionColumnArrived, tabParam, queryForm, operatModal, mainOrderCurrentRow, getMainOrderByPage }
      return datas
    },
    computed: {},
    methods: {
      sendNoticeAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.sendNoticeShow = true
      },
      sendNoticeClose (operatStr) {
        this.operatModal.sendNoticeShow = false
        if (operatStr === 'sendNotice') {
          this.$refs['inspectionTab'].dataRefresh()
        }
      },
      sendAssignmentOrderClose (operatStr) {
        this.operatModal.assignmentOrderShow = false
        if (operatStr === 'sendAssignmentOrderClose') {
          this.$refs['inspectionTab'].dataRefresh()
        }
      },
      assignmentOrderAction (row) {
        this.mainOrderCurrentRow = row
        let mainOrderNo = row.orderNo
        this.$Modal.confirm({
          title: '整列派单',
          content: '确定派单？',
          onOk: () => {
            let param = { mainOrderNo, paraPositionTime: '' }
            assignmentOrder(param).then(res => {
              console.log(res.data)
              if (res.data.isSuccess === 1) {
                this.$Message.info('派单成功')
                this.$refs['inspectionTab'].dataRefresh()
              } else {
                this.$Message.error(res.data.res)
              }
            })
          },
          onCancel: () => {
          }
        })
      },
      /**
       * TODO(查看详情)
       * @auther zhangQ
       * @date 2018/3/27 11:01
       */
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      },
      dataRefresh () {
        this.$refs['inspectionTab'].dataRefresh()
      }
    },
    created () {
    },
    watch: {
      tabParam: {
        handler: function (val, oldVal) {
          this.$refs['inspectionTab'].dataRefresh()
        },
        deep: true
      }
    },
    mounted () {
    },
    components: { tablePage, sendNoticeMainOrder, xlinkModal, assignmentOrder, viewDetail }
  }
</script>

<style scoped>

</style>
